<template>
  <view>
    <block v-for="(addressItem,index) in userAddressList" :key="index">
      <view class="address-item">
        <view class="left" @click="alreadySelected(addressItem)">
          <view class="name">
            {{addressItem.name}} {{addressItem.phone}}
          </view>
          <view class="address">
            {{addressItem.region}}{{addressItem.street}}
          </view>
        </view>
        <view class="mark" v-if="addressItem.defaults == 0">
          默认地址
        </view>
      </view>
    </block>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userAddressList: [],
        orderId: null,
      };
    },
    methods: {
      // 选择收货地址
      async alreadySelected(addressItemInfo) {
        const res = await uni.$http.post('/flow/order/rpAddress', {
          orderId: this.orderId + '',
          addressId: addressItemInfo.addressId + ''
        })
        if (res.data.code !== 200) return uni.$showMsg('修改失败请重试')
        uni.$showMsg('修改成功', 1500)
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      },
      // 获取用户地址信息
      async getUserAddress() {
        const res = await uni.$http.get('/personalcenter/address')
        if (res.data.code !== 200) return uni.$showMsg('获取用户地址信息失败')
        this.userAddressList = res.data.data
      }
    },
    onShow() {
      this.getUserAddress()
    },
    onLoad(option) {
      this.orderId = option.id
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F5F6F9;
  }



  .address-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 10px;
    position: relative;
    border-bottom: 1px dashed #8F9CA9;

    .left {
      width: 100%;

      .name {
        font-size: 18px;
        color: #000000;
        margin-bottom: 20rpx;
      }

      .address {
        font-size: 14px;
        color: #8F9CA9;
        word-wrap: break-word;
      }
    }

    .mark {
      width: 80px;
      height: 20px;
      background-color: #0062D9;
      color: white;
      line-height: 20px;
      text-align: center;
      border-radius: 12px;
      position: absolute;
      top: 12px;
      left: 210px;
    }
  }
</style>